style: Fix bg color weirdness on background apps close button

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3140>

diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index df752aa47b22b5173f22ae886289a4ed6ec167a1..c43081baf03ad800ea246c46d3ce6df043fc5010 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -198,9 +198,14 @@
     icon-size: $large_icon_size !important;
     -st-icon-style: regular !important;
   }
-  & .close-button {
-    @extend .icon-button;
+  & .icon-button {
     padding: $base_padding;
+
+    // override some background colors since it's a button on an already styled background
+    // FIXME: may need a generic drawing method for button in menu item in future
+    background-color: transparentize($fg_color, 0.87);
+    &:hover { background-color: transparentize($fg_color, 0.78);}
+    &:active { background-color: transparentize($fg_color, 0.69);}
   }
   & .spinner {
     padding: $base_padding;

diff --git a/js/ui/status/backgroundApps.js b/js/ui/status/backgroundApps.js
index fb457ae2dced5df677668513d1fa60f49d5d890c..6c4b80601afae3ae5da7e2d69b90c2e3b2e370b4 100644 (file)
--- a/js/ui/status/backgroundApps.js
+++ b/js/ui/status/backgroundApps.js
@@ -81,7 +81,7 @@ const BackgroundAppMenuItem = GObject.registerClass({
 
         const closeButton = new St.Button({
             iconName: 'window-close-symbolic',
-            styleClass: 'close-button',
+            styleClass: 'icon-button',
             x_expand: true,
             y_expand: false,
             x_align: Clutter.ActorAlign.END,